<template>
<!--  <p>{{state1}}</p>-->
<!--  <p>{{answers}}</p>-->
  <div class="mod-sys__dept" v-for="(item, index1) in state1.questions">

    <div v-if="item.typeId === 1" class="question-container">
      <div>{{ convertStringToObject(item.content).question}}</div>
      <el-radio-group v-model="answers[item.id]" @change="submitOne(index1)">
        <el-radio v-for="(op,index) in convertStringToObject(item.content).options" :label="index">{{ op }}</el-radio>
      </el-radio-group>
    </div>

    <div v-else-if="item.typeId === 2" class="question-container">
      <div>{{ convertStringToObject(item.content).question}}</div>
      <el-checkbox-group v-model="answers[item.id]" @change="submitOne(index1)">
        <el-checkbox v-for="(op,index) in convertStringToObject(item.content).options" :label="index">{{ op }}</el-checkbox>
      </el-checkbox-group>
    </div>

    <div v-else-if="item.typeId === 3" class="question-container">
      <div>{{ convertStringToObject(item.content).question}}</div>
      <el-input
        type="textarea"
        :rows="2"
        placeholder="请输入内容"
        v-model="answers[item.id]" @change="submitOne(index1)">
      </el-input>
    </div>

    <div v-else-if="item.typeId === 4" class="question-container">
      <div>{{ convertStringToObject(item.content).question}}</div>
      <el-input v-for="(op,index3) in convertStringToObject(item.content).blanks" :key="index3" v-model="answers[item.id][index3]" placeholder="请输入内容" @change="submitOne(index1)"></el-input>
    </div>

    <div v-if="item.typeId === 5" class="question-container">
      <div>{{ convertStringToObject(item.content).question}}</div>
      <div class="pic-container">
        <el-radio-group v-model="answers[item.id]" @change="submitOne(index1)">
          <el-radio v-for="(op,index) in convertStringToObject(item.content).options" :label="index">
            <img :src="op" class="controlled-size"/>
          </el-radio>
        </el-radio-group>
      </div>
    </div>

  </div>
  <button @click="submitAll()">提交全部</button>
</template>

<script lang="ts" setup>
import { reactive, ref, toRefs,onMounted } from "vue";

import useView from "@/hooks/useView";
import axios from "axios";
import baseService from "@/service/baseService";
import {getToken} from "@/utils/cache";


const answers = ref(new Map())

const state1 = ref({
});

const fetchQuestionData = () => {

  (baseService.get)("/qAnswerer/getQuestionsByAnswererId?id=dbb73637-0ec3-7dc8-bb72-09ee746097c3&token=" + getToken(), {}).then((res) => {
    console.log('请求成功了', res.data);
    state1.value = res.data;
    //根据
    for (let element of res.data.questions) {
      if(element.typeId ==4 && answers.value[element.id] === undefined){
        answers.value[element.id] = [];
      }
    }

  });
  (baseService.get)("/qAnswer/queryByAnswererId?answererId=dbb73637-0ec3-7dc8-bb72-09ee746097c3&token=" + getToken(),{}).then((res1) => {
    console.log('请求成功了1', res1.data);
    let items = res1.data;


    answers.value = items.reduce((acc, item) => {
      acc[item.questionId] = JSON.parse(item.answer);
      return acc;
    }, {});
    console.log(answers.value);

  });
}


const convertStringToObject = (jsonString : string) => {
  try {
    return JSON.parse(jsonString);
  } catch (e) {
    console.error('转换出错:', e);
  }
};

onMounted(() => {
  fetchQuestionData();
})

const submitAll = () => {
  console.log("submitAll");
};

const submitOne = (index: number) => {
  (baseService.post)("/qAnswer?token=" + getToken(), {
    questionId: state1.value.questions[index].id,
    answer: JSON.stringify(answers.value[state1.value.questions[index].id]),
    investigationId: state1.value.investigationId,
    answererId: state1.value.answererId
  }, {
    headers: {
      "Content-Type": "application/json;charset=UTF-8",
    }
  }).then((res) => {
    console.log('请求成功了', res.data);


  });
  console.log(answers.value);
  // console.log(answers.value[index]);
}




</script>

<style>

.question-container {
  //display: flex;
  flex-direction: column; /* 使得子元素垂直排列 */
  //align-items: flex-start; /* 子元素在交叉轴上的对齐方式，这里设置为顶部对齐 */
  height: auto;
  display: block;


}

.pic-container{
  height: 150px;

}
ul{
  list-style-type: none;
}

.controlled-size {
  width: 100px; /* 或任何你想要的宽度 */
  height: auto; /* 保持图片比例 */
  margin-top: 100px;

}

.clear{
  clear:both;
}
</style>
